<template>
	<view style="margin-bottom: 30px;">
		<uv-row customStyle="margin-bottom: 0px">
			<uv-col span="12">
				<view class="spantop">会议费用清单</view>
			</uv-col>
		</uv-row>
		<uv-row justify="space-between">
			<uv-col span="3">
				<view class="demo-layout   bg-purple-4 bg-purple-4-start">预定人员</view>
			</uv-col>
			<uv-col span="3">
				<view class="demo-layout bg-purple-4">梁雨龙</view>
			</uv-col>
			<uv-col span="3">
				<view class="demo-layout bg-purple-4">会议室</view>
			</uv-col>
			<uv-col span="3">
				<view class="demo-layout  bg-purple-4 bg-purple-4 bg-purple-4-end">3楼302</view>
			</uv-col>
		</uv-row>
		<uv-row customStyle="margin-bottom: 0px">
			<uv-col span="3">
				<view class="demo-layout bg-purple-time">预定时间</view>
			</uv-col>
			<uv-col span="9">
				<view class="demo-layout bg-purple-time2">2024-08-22 13:00-15:00</view>
			</uv-col>
		</uv-row>
		<uv-row customStyle="margin-bottom: 0px">
			<uv-col span="3">
				<view class="demo-list-left ">材料清单</view>
			</uv-col>
			<uv-col span="9">
				<view class="demo-list-right"></view>
			</uv-col>
		</uv-row>
		<uv-row customStyle="margin-bottom: 0px">
			<uv-col span="3">
				<view class="demo-xiao-left "></view>
			</uv-col>
			<uv-col span="9">
				<view class="demo-xiao-right ">小计：155元</view>
			</uv-col>
		</uv-row>
		<uv-row customStyle="margin-bottom: 0px">
			<uv-col span="3">
				<view class="demo-layout bg-purple-left">会议价格</view>
			</uv-col>
			<uv-col span="9">
				<view class="demo-layout bg-purple">内部会议1小时，共计100元</view>
			</uv-col>
		</uv-row>
		<uv-row customStyle="margin-bottom: 0px">
			<uv-col span="3">
				<view class="demo-layout bg-purple-left">固定费用</view>
			</uv-col>
			<uv-col span="9">
				<view class="demo-layout bg-purple">200元</view>
			</uv-col>
		</uv-row>
		<uv-row customStyle="margin-bottom: 0px">

			<uv-col span="3">
				<view class="demo-layout bg-purple-left">合计</view>
			</uv-col>
			<uv-col span="9">
				<view class="demo-layout bg-purple">375元</view>
			</uv-col>

		</uv-row>
	</view>
</template>
<style lang="scss">
	//
	//                       .::::.
	//                     .::::::::.
	//                    :::::::::::
	//                 ..:::::::::::'
	//              '::::::::::::'
	//                .::::::::::
	//           '::::::::::::::..
	//                ..::::::::::::.
	//              ``::::::::::::::::
	//               ::::``:::::::::'        .:::.
	//              ::::'   ':::::'       .::::::::.
	//            .::::'      ::::     .:::::::'::::.
	//           .:::'       :::::  .:::::::::' ':::::.
	//          .::'        :::::.:::::::::'      ':::::.
	//         .::'         ::::::::::::::'         ``::::.
	//     ...:::           ::::::::::::'              ``::.
	//    ````':.          ':::::::::'                  ::::..
	//                       '.:::::'                    ':'````..

	.demo-layout {
		height: 30px;

	}

	.demo-list-left {
		height: 200px;
		padding-top: 100px;
		margin-left: 10px;
		border-left: 1px solid #CCC;
		border-right: 1px solid #CCC;
		text-align: center;
	}

	.demo-list-right {
		height: 200px;
		margin-right: 10px;
		text-align: center;
		border-right: 1px solid #CCC;
		border-bottom: 1px solid #CCC;

	}

	.demo-xiao-left {
		height: 30px;
		margin-left: 10px;
		border-left: 1px solid #CCC;
		border-right: 1px solid #CCC;
		border-bottom: 1px solid #CCC;
	}


	.demo-xiao-right {
		height: 30px;
		margin-right: 10px;
		// border-left: 1px solid #CCC;
		padding-left: 15px;
		border-right: 1px solid #CCC;
		border-bottom: 1px solid #CCC;
	}



	.spantop {
		border: 1px solid #CCC;
		height: 30px;
		margin-right: 10px;
		margin-left: 10px;
		text-align: center;
		background-color: white;

	}

	.bg-purple {
		margin-right: 10px;
		border-right: 1px solid #CCC;
		border-bottom: 1px solid #CCC;
		padding-left: 30rpx;
		white-space: nowrap;
		overflow: hidden;
		// background: #CED7E1;
		background-color: white;
	}

	.bg-purple-left {
		margin-left: 10px;
		border-left: 1px solid #CCC;
		border-right: 1px solid #CCC;
		border-bottom: 1px solid #CCC;
		text-align: center;
		white-space: nowrap;
		overflow: hidden;
		// background: #e5e9f2;
		background-color: white;
	}

	.bg-purple-time {
		margin-left: 10px;
		border-left: 1px solid #CCC;
		border-right: 1px solid #CCC;
		border-bottom: 1px solid #CCC;
		text-align: center;
		white-space: nowrap;
		overflow: hidden;
		background-color: white;
	}


	.bg-purple-time2 {
		margin-right: 10px;
		// border-left: 1px solid #CCC;
		border-right: 1px solid #CCC;
		border-bottom: 1px solid #CCC;
		text-align: center;
		white-space: nowrap;
		overflow: hidden;
		background-color: white;
	}

	.bg-purple-4 {
		border-right: 1px solid #CCC;
		border-bottom: 1px solid #CCC;
		text-align: center;
		white-space: nowrap;
		overflow: hidden;
		background: #e5e9f2;
		background-color: white;
	}

	.bg-purple-4-start {
		margin-left: 10px;
		border-left: 1px solid #CCC;
	}

	.bg-purple-4-end {
		margin-right: 10px;
	}


	.bg-purple-dark {
		background: #99a9bf;
	}

	//
	//                  ___====-_  _-====___
	//            _--^^^#####//      \\#####^^^--_
	//         _-^##########// (    ) \\##########^-_
	//        -############//  |\^^/|  \\############-
	//      _/############//   (@::@)   \############\_
	//     /#############((     \\//     ))#############\
	//    -###############\\    (oo)    //###############-
	//   -#################\\  / VV \  //#################-
	//  -###################\\/      \//###################-
	// _#/|##########/\######(   /\   )######/\##########|\#_
	// |/ |#/\#/\#/\/  \#/\##\  |  |  /##/\#/  \/\#/\#/\#| \|
	// `  |/  V  V  `   V  \#\| |  | |/#/  V   '  V  V  \|  '
	//    `   `  `      `   / | |  | | \   '      '  '   '
	//                     (  | |  | |  )
	//                    __\ | |  | | /__
	//                   (vvv(VVV)(VVV)vvv)
	//
	//     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	//
	//               神兽保佑            永无BUG
</style>
<script>
	export default {

		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>
<style lang="scss" scoped>
</style>